/* eslint-disable @typescript-eslint/no-unused-expressions */
/* eslint-disable eqeqeq */
/* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable no-irregular-whitespace */
/* eslint-disable @typescript-eslint/space-before-function-paren */
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
/* eslint-disable array-callback-return */
/* eslint-disable multiline-ternary */
/* eslint-disable react/jsx-no-undef */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-floating-promises */
/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable @typescript-eslint/restrict-template-expressions */
import React, { useState, useEffect, FC } from 'react';
import './index.less';
import {
  Table, Divider, Button, Pagination
  , Switch, Modal, Form, Input, DrawerProps,
  RadioChangeEvent, Drawer, Radio, Space,
  Select, Tabs
} from 'antd';
import { Empty } from 'antd-mobile'
import * as API from '../../api/ayt';
// import { debounce } from '../../components/debounce';
import { PlusCircleOutlined } from '@ant-design/icons';
const { Option } = Select;
export default function index() {
  const [visible, setVisible] = useState(false);








  // 渲染表格全部数据
  useEffect(() => {
    fun()
  }, []);

  // 封装获取全部数据列表
  const fun = () => {
    API.getShop().then((res) => {
      setTimeout(() => {
        let data = res.data.data
        // let arr = data.filter((item: any, index: number) => {
        //   return item.state == 1
        // })
        data.map((item: any, index: number) => {
          return item.key = index
        })
        setAllData(data);
        setData(data);
        setLoading(false);
      }, 2000);
    });
  }

  function formatMsgTime(timespan: number) {
    const dateTime = new Date(timespan);
    const year = dateTime.getFullYear();
    const month = dateTime.getMonth() + 1;
    const day = dateTime.getDate();
    const hour = dateTime.getHours();
    const minute = dateTime.getMinutes();
    const now = new Date().getTime();
    let milliseconds = 0;
    let timeSpanStr;
    milliseconds = now - timespan;
    // 一分钟前，为刚刚
    if (milliseconds <= 1000 * 60 * 1) {
      timeSpanStr = '刚刚';
    } else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
      timeSpanStr = Math.round(milliseconds / (1000 * 60)) + '分钟前';
    } else if (
      1000 * 60 * 60 * 1 < milliseconds &&
      milliseconds <= 1000 * 60 * 60 * 24
    ) {
      timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + '小时前';
    } else if (
      1000 * 60 * 60 * 24 < milliseconds &&
      milliseconds <= 1000 * 60 * 60 * 24 * 15
    ) {
      timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + '天前';
    } else if (
      milliseconds > 1000 * 60 * 60 * 24 * 15 &&
      year == new Date().getFullYear()
    ) {
      timeSpanStr = month + '-' + day + ' ' + hour + ':' + minute;
    } else {
      timeSpanStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
    }
    return timeSpanStr;
  }


  const columns: any = [
    {
      align: 'center',
      title: 'ID',
      dataIndex: 'userid'
    },
    {
      align: 'center',
      title: '用户名',
      dataIndex: 'name',
      render: (text: string) => <a>{text}</a>
    },
    {
      align: 'center',
      title: '性别',
      dataIndex: 'sex'
    },
    {
      align: 'center',
      title: '电话',
      dataIndex: 'phone'
    },
    {
      align: 'center',
      title: '地址',
      dataIndex: 'region'
    },
    {
      align: 'center',
      title: '状态',
      dataIndex: 'state',
      render: (row: any, text: any) => <Switch checked={Boolean(row)} onChange={(e) => {
        const str: any = Number(e);

        API.switchNum({ num: str, id: text.userid }).then((res) => {
          fun()
        });
        //  checkedChildren='启用' unCheckedChildren='禁用'
      }} />
    },
    // {
    //   align: 'center',
    //   title: '状态',
    //   dataIndex: 'type',
    //   render: (row: any) => <p>
    //     {row}
    //   </p>
    // },
    {
      align: 'center',
      title: '创建时间',
      dataIndex: 'time',
      render: (text: any) => <p>{formatMsgTime(text)}</p>
    },
    {
      align: 'center',
      title: '操作',
      width: '245px',
      render: (a: any, row: any) => <>

        {/* 查看按钮 */}
        <Button type="primary" onClick={() => {
          // fun()
          // teres(username.fensi)
          // zuopin()
          setChakna(1)
          setVisible12(true);
          setUsername(row);
        }}>查看</Button>


      </>
    }
  ];
  const [userListShop, setUserList] = useState([])
  const [zuopinListShop, setZuopin] = useState([])
  const [chakna, setChakna] = useState(1)
  // 查看里面的tab切换 
  const { TabPane } = Tabs;

  function callback(key: any) {
    setChakna(key)
    if (key === "1") {
      teres(username.fensi)
    } else if (key === '2') {
      teres(username.flowList)
    } else if (key === '3') {
      zuopin(username.like)
    } else if (key === '4') {
      zuopin(username.recommend)
    } else if (key === '5') {
      zuopin(username.collec)
    }

  }

  const teres = (tes: any) => {
    API.fenshi({ ters: tes }).then((res: any) => {
      setUserList(res.data.data);
      fun()
    })
  }
  const zuopin = (tes: any) => {
    API.zuping({ ters: tes }).then((res: any) => {
      setZuopin(res.data.data)
      fun()
    })
  }
  interface DataType {
    key: React.Key
    username: string
    phone_num: number
    status: number
    type: string
    create_time: any
    update_time: any
  }
  const [data, setData]: any = useState();
  const [allData, setAllData]: any = useState();
  const [loading, setLoading]: any = useState(true);
  function onShowSizeChange(current: any, pageSize: any) {
    console.log(current, pageSize);
  }


  const str: any = window.sessionStorage.getItem('token');
  // const [admin, setAdmin] = useState(JSON.parse(str).username);
  const [dant, setDant]: any = useState({});
  const showModal = (a: any, row: any) => {
    console.log(row);
    setDant(row);
  };


  const [jurisdiction, setJurisdiction] = useState(false);
  const offdiction = () => {
    setJurisdiction(true);
  };

  // 删除确定按钮
  const ondiction = () => {
    API.deleteUser({ id: username.userid }).then(() => {
      fun()
    })
    setJurisdiction(false);
  };
  // 删除弹框取消按钮
  const closediction = () => {
    setJurisdiction(false);
  };

  const [username, setUsername]: any = useState({});

  const onCreate = (values: any) => {
    setVisible(false);
  };
  interface Values {
    title: string
    description: string
    modifier: string
  }
  interface CollectionCreateFormProps {
    visible: boolean
    onCreate: (values: Values) => void
    onCancel: () => void
  }
  const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
    visible,
    onCreate,
    onCancel
  }) => {



    const [form] = Form.useForm();
    // 查看弹框
    return (
      <Modal
        visible={visible}
        title="查看"
        okText="确定"
        cancelText="取消"
        onCancel={onCancel}
        onOk={() => {
          // form
          //   .validateFields()
          //   .then(values => {
          //     form.resetFields();
          //     setUsername({});
          //     onCreate(values);
          //   })
          //   .catch(info => {
          //     console.log('Validate Failed:', info);
          //   });
        }}
      >
      </Modal>

    );
  };


  const [users, setUser] = useState('');
  const indebounce = (fn: FC, wait: number) => {
    let timeout: any = null;
    return function (input: any) {
      input.persist();
      if (timeout !== null) clearTimeout(timeout);
      timeout = setTimeout(fn, wait, input);
    };
  };


  // 搜索input框 
  const handelChange = (e: any): any => {
    let ite = e.target.value
    API.setUser({ ite }).then((res) => {
      setData(res.data.data);
    })
  };

  // 分页
  const [numpage, setNumage] = useState(1);
  const [numtiso, setNumtiso] = useState(5);
  const yePage = (e: any) => {
    setNumage(e);
  };
  const handleChange = (value: any) => {
    console.log(value);
  };
  const [addpush, setAdd] = useState(false);
  const addclone = () => {
    setUsername({});
    setAdd(true);

  };
  const offclone = () => {
    setUsername({});
    setAdd(false);

  };


  //查看
  const [visible12, setVisible12] = useState(false);
  const [placement, setPlacement] = useState<DrawerProps['placement']>('right');

  const showDrawer = () => {
    setVisible12(true);

  };
  const onChange = (e: RadioChangeEvent) => {
    setPlacement(e.target.value);
  };
  const onClose = () => {
    setVisible12(false);
  };


  return (
    <div className='animate__animated animate__bounceInRight my_list'>
      <div>
      </div>
      <Drawer
        title="用户详情"
        placement={placement}
        width={500}
        onClose={onClose}
        visible={visible12}
      // extra={
      //   <Space>
      //     <Button onClick={onClose}>Cancel</Button>
      //     <Button type="primary" onClick={onClose}>
      //       OK
      //     </Button>
      //   </Space>
      // }
      >
        <div className='detil'>
          <div>
            <p>姓名:{username.name}</p>
            <p>id:{username.userid}</p>
            <p>电话:{username.phone}</p>
          </div>
          <div>
            <p>性别:{username.sex}</p>
            <p>地区:{username.region}</p>
            <p>时间:{new Date(username.time).toLocaleString()}</p>
          </div>
        </div>
        <div>
          <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab={`他的粉丝`} key="1">
              <div className='fensiClass'>
                {
                  userListShop.length > 0 ? userListShop.map((item: any, index: number) => {
                    return <div key={index} className='fensi_child'>
                      <img src={item.img} alt="" />
                      <div className='detile'>
                        <p> {item.name}</p>
                        <p>地址:{item.region}</p>
                        <p>电话{item.phone}</p>
                      </div>

                    </div>
                  }) : <div>
                    <p style={{ textAlign: 'center' }}>暂无数据</p>
                  </div>
                }
              </div>
            </TabPane>
            <TabPane tab="关注的人" key="2">
              <div className='fensiClass'>
                {
                  userListShop.length > 0 ? userListShop.map((item: any, index: number) => {
                    return <div key={index} className='fensi_child'>
                      <img src={item.img} alt="" />
                      <div className='detile'>
                        <p> {item.name}</p>
                        <p>地址:{item.region}</p>
                        <p>电话{item.phone}</p>
                      </div>

                    </div>
                  }) : <div>
                    <p style={{ textAlign: 'center' }}>暂无数据</p>
                  </div>
                }
              </div>
            </TabPane>
            <TabPane tab="喜欢的作品" key="3">
              <div className="choucang">
                {
                  zuopinListShop.length > 0 ? (
                    zuopinListShop.map((item: any, index: number) => {
                      return (
                        <div
                          className="shoucang"
                          key={index}  >
                          {item.workType === '1' ? (
                            <div>
                              <img src={item.workMain} alt="" />
                            </div>
                          ) : item.workType === '2' ? (
                            <div>
                              <video
                                src={item.workMain}
                                className="choucangVido"
                              ></video>
                            </div>
                          ) : null}

                          <div className="texa">
                            <h3>{item.workText}</h3>
                            <p className="classop">
                              <span>{item.worklabel}</span>
                              <span>{item.workgenre}</span>
                            </p>
                          </div>
                        </div>
                      );
                    })
                  ) : <div>
                    <p style={{ textAlign: 'center' }}>暂无数据</p>
                  </div>
                }
              </div>
            </TabPane>
            <TabPane tab="推荐的作品" key="4">
              <div className="choucang">
                {
                  zuopinListShop.length > 0 ? (
                    zuopinListShop.map((item: any, index: number) => {
                      return (
                        <div
                          className="shoucang"
                          key={index}  >
                          {item.workType === '1' ? (
                            <div>
                              <img src={item.workMain} alt="" />
                            </div>
                          ) : item.workType === '2' ? (
                            <div>
                              <video
                                src={item.workMain}
                                className="choucangVido"
                              ></video>
                            </div>
                          ) : <div>
                            <p style={{ textAlign: 'center' }}>暂无数据</p>
                          </div>}

                          <div className="texa">
                            <h3>{item.workText}</h3>
                            <p className="classop">
                              <span>{item.worklabel}</span>
                              <span>{item.workgenre}</span>
                            </p>
                          </div>
                        </div>
                      );
                    })
                  ) : <div>
                    <p style={{ textAlign: 'center' }}>暂无数据</p>
                  </div>
                }
              </div>
            </TabPane>
            <TabPane tab="收藏的作品" key="5">
              <div className="choucang">
                {
                  zuopinListShop.length > 0 ? (
                    zuopinListShop.map((item: any, index: number) => {
                      return (
                        <div
                          className="shoucang"
                          key={index}  >
                          {item.workType === '1' ? (
                            <div>
                              <img src={item.workMain} alt="" />
                            </div>
                          ) : item.workType === '2' ? (
                            <div>
                              <video
                                src={item.workMain}
                                className="choucangVido"
                              ></video>
                            </div>
                          ) : null}

                          <div className="texa">
                            <h3>{item.workText}</h3>
                            <p className="classop">
                              <span>{item.worklabel}</span>
                              <span>{item.workgenre}</span>
                            </p>
                          </div>
                        </div>
                      );
                    })
                  ) : <div>
                    <p style={{ textAlign: 'center' }}>暂无数据</p>
                  </div>
                }
              </div>
            </TabPane>
          </Tabs>
        </div>
      </Drawer >

      <div className='my_header'>
        <h2 style={{ margin: '20px 0' }}>
          <span style={{ fontSize: '22px', margin: '0 20px' }} className='iconfont icon-yonghuguanli_huaban'></span>
          用户列表
        </h2>
        <div style={{ display: 'flex' }}>
          <div style={{ marginLeft: '30px', display: 'flex' }}>
            <Form layout='inline'>
              <Form.Item label="搜&nbsp;&nbsp;&nbsp;&nbsp;索">
                <Input
                  allowClear={true}
                  onChange={indebounce(handelChange, 1000)}
                  placeholder="请输入搜索内容"
                  style={{ marginBottom: '15px' }}
                />
              </Form.Item>
            </Form>
            {/* <Button className='adduser' onClick={addclone} icon={<PlusCircleOutlined />} type="primary">
              添加用户
            </Button> */}
          </div>
        </div>
      </div>
      <div>
        <Divider />
        {
          data ? <Table
            columns={columns}
            loading={loading}
            dataSource={data.slice((numpage - 1) * numtiso, numpage * numtiso)}
            pagination={false}
            bordered
          /> : <Table
            columns={columns}
            loading={loading}
            pagination={false}
            bordered
          />
        }
        <div style={{ margin: '20px', float: 'right' }}>
          {
            data ? <Pagination
              pageSizeOptions={[5, 10, 15]}
              defaultPageSize={numtiso}
              showQuickJumper
              defaultCurrent={numpage}
              total={data.length}
              onChange={yePage} /> : null
          }
        </div>

      </div>
      <CollectionCreateForm
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setUsername({});
          setVisible(false);
        }}
      />

      <Modal
        title="提示"
        visible={jurisdiction}
        onOk={ondiction}
        onCancel={closediction}
        okText="确认"
        cancelText="取消"
      >
        <div style={{ width: '300px' }}>
          是否删除该条用户信息?
        </div>
      </Modal>
      <Modal
        title="添加"
        visible={addpush}
        onOk={addclone}
        onCancel={offclone}
        okText="确认"
        cancelText="取消"
      >
        <div style={{ width: '300px' }}>
        </div>
      </Modal>
    </div >
  );
}


